import { DownOutlined, PlusOutlined, LinkOutlined  } from '@ant-design/icons';
import { Button, Divider, Space, Tag, message } from 'antd';
import React, { useState, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem, FormValueType } from './data.d';
import { queryDevice, updateDevice, addDevice, removeDevice } from './service';


const valueEnum = {
  0: { text: '正常', color: '#324fab' },
  1: { text: '离线', color: '#5278a9' },
  2: { text: '报警', color: '#c9ab6d' },
  3: { text: '报警', color: '#c9ab6d' },
}

const TableList: React.FC<{}> = () => {

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '通讯状态',
      dataIndex: 'status',
      search: false,
      render: (_, record) => (
        <Space>
          <Tag color={valueEnum[record.status].color}>
            {valueEnum[record.status].text}
          </Tag>
        </Space>
      ),
    },
    {
      title: '设备分类路径',
      dataIndex: 'col1',
      valueEnum: {
        0: { text: '高压线缆' },
        1: { text: '10KV室内部分-进线'},
        2: { text: '安全工具-绝缘手套' },
        3: { text: '室外高压' },
        4: { text: '0.4KV（低压）' },
        5: { text: '门卫室-01' },
      },
    },
    {
      title: '设备名称',
      dataIndex: 'col2',
    },
    {
      title: '设备详情',
      dataIndex: 'option',
      render: (_, record) => (
        <Button type='primary' size={'small'}>查看</Button>
      ),
    },
    {
      title: '创建人',
      dataIndex: 'col3',
    },
    {
      title: '创建时间',
      valueType: 'date',
      dataIndex: 'createdAt',
    },
    {
      title: '安装时间',
      valueType: 'date',
      dataIndex: 'updatedAt',
    },
    {
      title: '质保期',
      dataIndex: 'col4',
    },
    {
      title: '建议更换时间',
      dataIndex: 'desc',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
            }}
          >
            配置
          </a>
          <Divider type="vertical" />
          <a href="">订阅警报</a>
        </>
      ),
    },
  ];

  return (
      <ProTable<TableListItem>
        headerTitle=""
        actionRef={actionRef}
        rowKey="key"
        toolBarRender={(action, { selectedRows }) => [
          <Button icon={<LinkOutlined />} type="primary" onClick={() => {}}>
            导出
          </Button>,
        ]}
        tableAlertRender={false}
        request={(params) => queryDevice(params)}
        columns={columns}
        rowSelection={false}
      />
  );
};

export default TableList;
